<template>
  <div class="admin-login">
    <div class="login-form">
      <div class="header">
        <h2>计算机考研网站</h2>
        <h4>管理员登陆</h4>
      </div>
      <el-form
        :model="adminForm"
        :rules="rules"
        ref="adminForm"
        label-width="100px"
        class="form"
      >
        <el-form-item label="账号" label-width="50px" prop="username">
          <el-input v-model="adminForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="50px" prop="password">
          <el-input
            type="password"
            v-model="adminForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loginLoading" @click="login"
            >提交</el-button
          >
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import userInfo from "@/utils/userInfo";
import { adminLogin } from "@/api/admin/admin";
export default {
  name: "AdminLoginView",
  data() {
    return {
      loginLoading: false,
      adminForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请填写账号", trigger: "blur" }],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      this.$refs.adminForm.validate(async (v) => {
        if (v) {
          try {
            this.loginLoading = true;
            const res = await adminLogin(this.adminForm);
            localStorage.setItem("a_t", res.data.token);
            userInfo.setUser({
              id: res.data.id,
              name: res.data.adminName,
            });
            this.$router.push("/admin");
          } finally {
            this.loginLoading = false;
          }
        }
      });
    },
    reset() {
      this.$refs.adminForm.resetFields();
    },
    handleEnter() {
      console.log(3);
    },
  },
};
</script>

<style lang="less" scoped>
.admin-login {
  width: 100vw;
  height: 100vh;
  min-width: 1256px;
  background-image: url("../../../assets/bg.jpg");
  // 图片自适应
  background-size: 100% 100%;
  // 图片不重复
  background-repeat: no-repeat;
  // 解决父容器坍塌
  overflow: hidden;
  .login-form {
    margin-top: 140px;
    margin-left: 100px;
    padding-top: 50px;
    width: 400px;
    height: 380px;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    // 阴影
    box-shadow: 3px 6px 10px 6px rgba(0, 0, 0, 0.3);
    .header {
      text-align: center;
      h4 {
        font-size: 14px;
        margin: 10px 0;
      }
    }
    .form {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    }
  }
}
/deep/.el-form-item__content {
  width: 220px;
  display: flex;
  justify-content: space-between;
  margin-left: 0 !important;
}
</style>